import React, { Component } from 'react';
import service from '../api'
import '../styles/Detail.scss'
import { NavBar, Toast } from 'antd-mobile'
import { Swiper } from 'antd-mobile'
// import { show } from 'antd-mobile/es/components/dialog/show';
class Detail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            goodinfo: {},
            banners: [],
            carlist: [],
            proid:'',
            userid:'',
            num:''
        }
    }
    async componentDidMount() {
        this.setState({proid:this.props.match.params.proid})
        var res1 = await service.pro.pro_recommendlist()
        this.setState({ carlist: res1.data.data })
        var res = await service.pro.pro_detail(this.props.match.params.proid)

        if (res.data.code == 10001) {
            Toast.show('该商品已下架')
            this.props.history.go(-1)
        } else if (res.data.code == 200) {
            this.setState({ goodinfo: res.data.data })
            this.setState({ banners: res.data.data.banners[0].split(',') })
        }

    }
    car(){
        
    }
    async shop(){
        var res3 = await service.shopcar.cart_add({proid:this.state.proid,userid:localStorage.getItem('userid'),num:1})
        console.log(res3.data.data);
        if(res3.data.code == 200){
            Toast.show(res3.data.message)
        }
    }
    render() {
        return (
            <div className='detail'>
                <div className="top">
                    <NavBar onBack={() => { this.props.history.go(-1) }}>商品详情</NavBar>
                </div>



                <div className="det">
                    <div className="pic">
                        <Swiper autoplay loop autoplayInterval={1000}>
                            {
                                this.state.banners.map((item, index) => {
                                    return (
                                        <Swiper.Item key={index}>
                                            <img src={item} alt="" />
                                        </Swiper.Item>
                                    )
                                })
                            }
                        </Swiper>
                    </div>
                    <div className="text">
                        <div className="price">
                            <span>{this.state.goodinfo.originprice}</span>
                            <span>销量：{this.state.goodinfo.sales}</span>
                        </div>
                        <div className="name">
                            <span>{this.state.goodinfo.brand}</span>
                            <span>{this.state.goodinfo.category}</span>
                            <span>{this.state.goodinfo.proname}</span>
                        </div>
                    </div>
                </div>
                <div className="address">
                    <div>送至</div>
                    <div>浙江省杭州市</div>
                    <div className='iconfont icon-youjiantou'></div>
                </div>
                <div>
                    <h2>猜你喜欢</h2>
                </div>
                <div className="goods">
                    {
                        this.state.carlist.map((item, index) => {
                            return (
                                <div className="list" key={index}>
                                    <img src={item.img3} alt="" />
                                    <div className="name">{item.proname}</div>
                                    <div className="price">￥{item.originprice}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="goodcar">
                    <div className="left">
                        <div className="box">
                            <div className='iconfont icon-kefu'></div>
                            <div>客服</div>
                        </div>
                        <div className="box">
                            <div className='iconfont icon-gouwuche'></div>
                            <div onClick={()=>{this.car(this.props.history.push('/index/shopcar'))}}>购物车</div>
                        </div>
                        <div className="box">
                            <div className='iconfont icon-shoucang'></div>
                            <div>收藏</div>
                        </div>
                    </div>
                    <div className="right">
                        <button onClick={()=>{this.shop()}}>加入购物车</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default Detail;